<template>
  <div class="sidebar-demo">
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span class="title">侧边栏主题演示</span>
          <div class="header-actions">
            <ThemeToggle />
            <el-button 
              type="primary" 
              size="small" 
              @click="toggleSidebar"
              style="margin-left: 12px;"
            >
              {{ sidebarCollapsed ? '展开' : '折叠' }}侧边栏
            </el-button>
          </div>
        </div>
      </template>
      
      <div class="demo-content">
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="sidebar-preview" :class="{ collapsed: sidebarCollapsed }">
              <div class="preview-sidebar">
                <div class="preview-header">
                  <div class="preview-logo">
                    <div class="logo-icon">🎓</div>
                    <span v-show="!sidebarCollapsed" class="logo-text">面试官</span>
                  </div>
                </div>
                
                <div class="preview-menu">
                  <div 
                    v-for="item in menuItems" 
                    :key="item.id"
                    class="preview-menu-item"
                    :class="{ active: item.active, 'has-children': item.children }"
                    @click="toggleMenuItem(item)"
                  >
                    <div class="menu-item-content">
                      <i :class="item.icon" class="menu-icon"></i>
                      <span v-show="!sidebarCollapsed" class="menu-text">{{ item.title }}</span>
                    </div>
                    
                    <div 
                      v-if="item.children && item.expanded && !sidebarCollapsed" 
                      class="submenu"
                    >
                      <div 
                        v-for="child in item.children"
                        :key="child.id"
                        class="submenu-item"
                        :class="{ active: child.active }"
                        @click.stop="toggleMenuItem(child)"
                      >
                        <i :class="child.icon" class="menu-icon"></i>
                        <span class="menu-text">{{ child.title }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          
          <el-col :span="16">
            <div class="demo-description">
              <h3>侧边栏主题特性</h3>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="浅色主题">
                  <el-tag type="info">白色背景，深色文字，蓝色激活状态</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="深色主题">
                  <el-tag type="info">深蓝背景，浅色文字，蓝色激活状态</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="交互效果">
                  <el-tag type="success">悬停高亮，激活边框，平滑过渡</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="折叠支持">
                  <el-tag type="warning">图标居中，文字隐藏，宽度自适应</el-tag>
                </el-descriptions-item>
              </el-descriptions>
              
              <h3 style="margin-top: 24px;">主题变量说明</h3>
              <el-table :data="themeVariables" style="width: 100%">
                <el-table-column prop="variable" label="CSS变量" width="200" />
                <el-table-column prop="light" label="浅色主题" />
                <el-table-column prop="dark" label="深色主题" />
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ThemeToggle from '@/components/ThemeToggle.vue'

const sidebarCollapsed = ref(false)

const menuItems = ref([
  {
    id: 1,
    title: '仪表盘',
    icon: 'el-icon-odometer',
    active: true,
    children: null
  },
  {
    id: 2,
    title: '学生管理',
    icon: 'el-icon-user',
    active: false,
    expanded: false,
    children: [
      { id: 21, title: '学生列表', icon: 'el-icon-document', active: false },
      { id: 22, title: '学生档案', icon: 'el-icon-folder', active: false }
    ]
  },
  {
    id: 3,
    title: '简历管理',
    icon: 'el-icon-document',
    active: false,
    children: null
  },
  {
    id: 4,
    title: '面试管理',
    icon: 'el-icon-chat-dot-round',
    active: false,
    expanded: true,
    children: [
      { id: 41, title: '面试安排', icon: 'el-icon-calendar', active: false },
      { id: 42, title: '面试题库', icon: 'el-icon-collection', active: true }
    ]
  },
  {
    id: 5,
    title: '系统设置',
    icon: 'el-icon-setting',
    active: false,
    children: null
  }
])

const themeVariables = ref([
  {
    variable: '--sidebar-bg',
    light: '#ffffff',
    dark: '#001529'
  },
  {
    variable: '--sidebar-text',
    light: '#606266',
    dark: 'rgba(255,255,255,0.65)'
  },
  {
    variable: '--sidebar-text-active',
    light: '#409eff',
    dark: '#ffffff'
  },
  {
    variable: '--sidebar-item-bg-hover',
    light: '#f5f7fa',
    dark: 'rgba(255,255,255,0.1)'
  },
  {
    variable: '--sidebar-item-bg-active',
    light: '#ecf5ff',
    dark: '#409eff'
  }
])

const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const toggleMenuItem = (item: any) => {
  // 重置所有菜单项的激活状态
  const resetActive = (items: any[]) => {
    items.forEach(menuItem => {
      menuItem.active = false
      if (menuItem.children) {
        resetActive(menuItem.children)
      }
    })
  }
  
  resetActive(menuItems.value)
  
  // 设置当前项为激活状态
  item.active = true
  
  // 如果有子菜单，切换展开状态
  if (item.children) {
    item.expanded = !item.expanded
  }
}
</script>

<style lang="scss" scoped>
.sidebar-demo {
  .demo-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-color-primary);
      }
      
      .header-actions {
        display: flex;
        align-items: center;
      }
    }
  }
  
  .sidebar-preview {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    
    &.collapsed {
      .preview-sidebar {
        width: 64px;
      }
    }
    
    .preview-sidebar {
      width: 200px;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
      transition: all 0.3s ease;
      
      .preview-header {
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        border-bottom: 1px solid var(--sidebar-border);
        
        .preview-logo {
          display: flex;
          align-items: center;
          color: var(--sidebar-text-active);
          
          .logo-icon {
            font-size: 24px;
            margin-right: 8px;
          }
          
          .logo-text {
            font-size: 16px;
            font-weight: 600;
            white-space: nowrap;
          }
        }
      }
      
      .preview-menu {
        padding: 8px;
        
        .preview-menu-item {
          margin-bottom: 4px;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.3s ease;
          
          .menu-item-content {
            display: flex;
            align-items: center;
            padding: 12px;
            color: var(--sidebar-text);
            
            .menu-icon {
              font-size: 18px;
              margin-right: 12px;
              width: 18px;
              text-align: center;
            }
            
            .menu-text {
              font-size: 14px;
              white-space: nowrap;
            }
          }
          
          &:hover {
            background-color: var(--sidebar-item-bg-hover);
            
            .menu-item-content {
              color: var(--sidebar-text-hover);
            }
          }
          
          &.active {
            background-color: var(--sidebar-item-bg-active);
            border-left: 3px solid var(--sidebar-item-border-active);
            
            .menu-item-content {
              color: var(--sidebar-text-active);
              font-weight: 600;
            }
          }
          
          .submenu {
            background-color: var(--sidebar-submenu-bg);
            
            .submenu-item {
              display: flex;
              align-items: center;
              padding: 8px 12px 8px 40px;
              color: var(--sidebar-submenu-text);
              cursor: pointer;
              transition: all 0.3s ease;
              
              .menu-icon {
                font-size: 14px;
                margin-right: 8px;
                width: 14px;
              }
              
              .menu-text {
                font-size: 13px;
              }
              
              &:hover {
                color: var(--sidebar-text-hover);
                background-color: var(--sidebar-item-bg-hover);
              }
              
              &.active {
                color: var(--sidebar-text-active);
                background-color: var(--sidebar-item-bg-active);
                border-left: 3px solid var(--sidebar-item-border-active);
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
  
  .demo-description {
    h3 {
      color: var(--text-color-primary);
      margin-bottom: 16px;
    }
  }
}

// 折叠状态下的特殊样式
.sidebar-preview.collapsed {
  .preview-menu {
    .preview-menu-item {
      .menu-item-content {
        justify-content: center;
        padding: 12px 8px;
        
        .menu-icon {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
